@charset 'utf-8';

@mixin img(){
    width: 100%;
    height: 100%;
}
section{
    aside{
        .nav{
            width: 1000px;
            margin: 24px auto;
            font-size: 13px;
            color:#444f58;
            a{
                color:#444f58;
            }
        }
        
        .brand{
            width: 100%;
            height: 310px;
            border-top: 1px solid #dfdfdf;
            overflow: hidden;
            position: relative;
            #carous{
                width: 100%;
                img{
                    @include img();
                    position: absolute;
                    opacity: 0;
                    z-index: 1;
                    &:nth-child(1){
                        opacity: 1;
                    }
                }
            }
            .text{
                position: absolute;
                left: 261px;
                top: 60px;
                z-index: 2;
                p{
                    strong{
                        font-size: 22px;
                        color: white;
                        line-height: 34px;
                    }
                    &:nth-child(2){
                        color: #e60012;
                        font-size: 18px;
                        line-height: 31px;
                    }
                    &:nth-child(3){
                        color: white;
                        font-size: 14px;
                        line-height: 22px;
                    }
                }
                input[type='image']{
                    border-radius: 10px;
                    margin-top: 24px;
                }
            }
            ul{
                position: absolute;
                right: 203px;
                bottom: 12px;
                z-index: 2;
                li{
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    margin-right: 6px;
                    float: left;
                    background: white;
                    cursor: pointer;
                    &:hover,&.active{
                        background: #e31424;
                    }
                }
            }
        }
    }
    article{
        .article-title{
            width: 958px;
            height: 52px;
            margin: 12px auto 14px;
            border: 1px solid #efefef;
            .article-navbar{
                margin-left: 28px;
                span{
                    padding-right: 40px;
                    a{
                        font-size: 14px;
                        color: #444f58;
                        line-height: 52px;
                        &:hover,&.active{
                            color:#e60012 ;
                        }
                    }
                }
            }
            .search{
                width: 188px;
                height: 28px;
                border: 1px solid #e4e5e7;
                position: relative;
                margin-right: 21px;
                margin-top: 11px;
                 border-radius: 10px;
                input[type='text']{
                    @include img();
                      border: none;
                    border-radius: 10px;
                    text-indent: 12px;
                    font-size: 13px;
                    color: #99999a;
                    line-height: 28px;
                }
                input[type='image']{
                    position: absolute;
                    right: 8px;
                    top: 8px;
                }
            }
        }
        .shop{
            width: 958px;
            margin: 0 auto;
            border: 1px solid #efefef;
        .article-shop{
            
            .pro-shop{
                width: 902px;
                margin-left: 36px;
                margin-right: 20px;
                
                li{
                    float: left;
                    width: 170px;
                    height: 258px;
                    border: 1px solid #efefef;
                    position: relative;
                    margin-right: 11px;
                    margin-bottom:19px; 
                    &:nth-child(1){
                        height: 104px !important;
                        border: none;
                        
                        .ad-img{
                            height: 104px;
                            margin-bottom: 16px;
                            img{
                                width: 70px;
                                height: 70px;
                                display: block;
                                margin:34px auto 0;
                            }
                        }
                        .ad-text{
                            height: 154px;
                            text-align: center;
                            background: white;
                            p:nth-child(1){
                                font-size: 16px;
                                color: #e60012;
                                line-height: 24px;
                            }
                            p:nth-child(2){
                                font-size: 12px;
                                color: #444f58;
                                line-height: 25px;
                            }
                            input{
                                width: 58px;
                                height: 26px;
                                border-radius: 3px;
                                color: white;
                                font-size: 14px;
                                line-height: 26px;
                                margin-top: 32px;
                                background: #e60012;
                            }
                        }
                    }
                    &:last-child{
                        margin-right: 0;
                    }
                    div{
                        width: 170px;
                        height: 170px;
                        overflow: hidden;
                        img{
                            @include img();
                             transition:all 0.5s;
                            &:hover{
                                transform: scale(1.1);
                                transition:all 0.5s;
                            }
                        }
                        &:nth-child(2){
                            width: 170px;
                            height: 88px;
                            background: #efefef;
                        }
                    }
                 strong{
                     display: block;
                     font-size: 15px;
                     color: #444f58;
                     position: absolute;
                     bottom: 53px;
                     left: 20px;
                 }
                 span{
                     font-size: 15px;
                     color: #99999a;
                     position: absolute;
                     left: 20px;
                     bottom: 28px;
                 }
                 input[type='image']{
                     border-radius: 8px;
                     position: absolute;
                     bottom: 10px;
                     right: 12px;
                 }
                }
            }
           }
        }
    }
    .page{
        width: 960px;
        margin:40px auto 49px;
        .link{
            width: 445px;
            li{
                float: left;
                width: 36px;
                height: 36px;
                border: 1px solid #e7e7e7;
                margin-right: 9px;
                line-height:36px; 
                position:relative; 
                border-radius:2px; 
                &:hover,&.active{
                    border-color: #eb413d;
                }
                &:last-child{
                    margin-right: 0;
                }
                &:nth-last-child(2){
                    width: 66px;
                    height: 36px;
                }
                &:nth-child(5){
                    button{
                        font-weight: bold;
                    }
                }
                &:nth-child(5),&:nth-child(7){
                    border: none;
                }
                input{
                    position: absolute;
                    top: 0;
                    text-indent: 8px;
                    width: 36px;
                    height: 36px;
                    border-radius:2px; 
                    border: none;
                }
                button{
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 100%;
                     border-radius:2px; 
                    background: white;
                    color: #444f58;
                    font-size: 13px;
                    &:focus{
                        outline: none;
                    }
                }
                span{
                    color: #444f58;
                    font-size: 13px;
                }
                
            }
        }
    }
}